<template>
	<view class="login-page">
		<view class="login-form">
			<view class="login-title">
				智能健康平台
			</view>
			<view class="login-nav">
				<text class="nav-box" :class="isActive === 0? 'active' : ''" @click="swtichTab(0)">登录</text>
				<text class="nav-box" :class="isActive === 1? 'active' : ''" @click="swtichTab(1)">注册</text>
			</view>
			<view class="form-box" v-if="isActive === 0">
				<u--input placeholder="手机号" v-model="loginForm.PhoneNumber" prefixIcon="phone-fill"
					:prefixIconStyle="inputStyle"></u--input>
				<u--input v-model="loginForm.Password" placeholder="登录密码" password prefixIcon="lock-opened-fill" :prefixIconStyle="inputStyle"></u--input>
			</view>
			<view class="form-box" v-else>
				<u--input v-model="regForm.Name" placeholder="姓名"  prefixIcon="account-fill" :prefixIconStyle="inputStyle"></u--input>
				<u--input placeholder="手机号" v-model="regForm.PhoneNumber" prefixIcon="phone-fill" :prefixIconStyle="inputStyle"></u--input>
				<u--input v-model="regForm.Department" placeholder="部门" prefixIcon="bookmark-fill":prefixIconStyle="inputStyle"></u--input>
			</view>
			<view class="footer-btn">
				<u-button :text="isActive=== 0? '登录' : '注册'" @click="login" shape="circle" class="custom-style"></u-button>
			</view>
		</view>
		
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputStyle: 'font-size: 22px;color: #24c789;',
				isActive: 0,
				loginForm: {
					PhoneNumber: '',
					Password: '',
				},
				regForm:{
					PhoneNumber:'',
					Department:'',
					Name:''
				}
			};
		},
		onShow() {
			const userInfo = uni.getStorageSync('userInfo')
			if (!!userInfo) {
				uni.switchTab({
					url:'/pages/my'
				})
			}
		},
		methods: {
			swtichTab(val){
				this.isActive = val
				this.loginForm = {}
				this.regForm = {}
			},
			//登录
		 	async login() {
				if (!this.isActive) {
					if (!this.loginForm.PhoneNumber && !this.loginForm.Password) {
						return this.$refs.uToast.show({
							message: '请输入登录参数！',
							type: 'error'
						});
					}
					const {data}= await uni.$http.get('/login',this.loginForm)
					if(data && data.code !==200){
						this.$refs.uToast.show({
							message: data.msg,
							type: 'error'
						});
					}else{
						this.$refs.uToast.show({
							message: '登陆成功！',
							type: 'success'
						});
						uni.setStorageSync('userInfo',JSON.stringify(data.data))
						uni.switchTab({
							url:'/pages/my'
						})
					}
					

				} else {
					if (!this.regForm.PhoneNumber && !this.regForm.Name) {
						return this.$refs.uToast.show({
							message: '请输入注册参数！',
							type: 'error'
						});
					}
					const {data} = await uni.$http.post('/register',this.regForm)
					if(data && data.code !==200){
						this.$refs.uToast.show({
							message: data.msg,
							type: 'error'
						});
					}else{
						this.$refs.uToast.show({
							message: '注册成功，请登录！',
							type: 'success'
						});
						this.isActive = 0
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.login-page {
		position: relative;
		width: 100%;
		height: 100%;
		background-color: #24c789;

		.login-form {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 90%;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 50rpx 30rpx;
			box-sizing: border-box;

			.login-title {
				width: 100%;
				text-align: center;
				font-size: 38rpx;
				color: #000;
				font-weight: bold;
				opacity: 0.6;
				margin-top: 20rpx;
				letter-spacing: 3rpx;
			}

			.login-nav {
				margin: 50rpx auto;
				width: 80%;
				display: flex;
				align-items: center;
				justify-content: center;

				.nav-box {
					width: inherit;
					padding: 10rpx 20rpx;
					border-bottom: 5rpx solid #c4c4c4;
					text-align: center;
					font-weight: bold;
					color: #999;
				}

				.active {
					transition: 1s ease;
					color: #606266;
					border-color: #24c789;
				}
			}

			.form-box {
				::v-deep.u-input {
					background-color: #f1f5f8;
					border: none;
					margin-top: 20rpx;
				}

				::v-deep.uni-input-placeholder {
					font-size: 22rpx;
				}

				::v-deep.uni-input-input {
					font-size: 22rpx;
				}
			}

			.reguest-box {
				margin: 30rpx 0;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}

			.footer-btn {
				margin-top: 30rpx;
				width: 100%;

				.custom-style {
					background-color: #54b6ab;
					color: #fff;
				}

				::v-deep.u-icon__icon--info {
					color: #54b6ab;
				}
			}
		}
	}
</style>